<template>
  <div>
    <div class="slot">
      <div class="top">
        <div class="return" @click="goback">
          <img src="@/assets/my/zuo.png" alt />
        </div>
        <span>售后补货</span>
      </div>
    </div>
    <div class="main">
      <div class="li_cent" v-for="(item,index) in orderinfo.goods" :key="index">
        <div class="img">
          <img :src="item.image" alt />
        </div>
        <div class="shop_info">
          <div class="shop_name">
            <div class="name">{{ item.title }}</div>
            <div class="jiage">￥{{ item.price }}</div>
          </div>
          <div class="shop_price">{{item.specs_name}}</div>
          <div class="cd_info">
            <div class="shop_spec">已选：{{ item.num }}{{item.unit}}</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bot_main">
          合计：
          <span style="font-size: 18px; color: #ff511e; line-height: 18px">
            ￥
            <span style="font-size: 30px; line-height: 30px">{{
              orderinfo.total
            }}</span>
          </span>
        </div>
      </div>
    </div>
    <div class="main1">
      <div class="main1_cent">
        <div class="cent_li">
          <div class="name">售后类型</div>
          <div class="type">补货</div>
        </div>
        <div class="cent_li">
          <div class="name">补货数量</div>
          <input
            class="input"
            placeholder="请输入"
            type="number"
            v-model="num"
            name="shopnum"
          />
          <div class="danwei"></div>
        </div>
        <div class="cent_li">
          <div>
            <div class="name">详细描述</div>
            <textarea
              class="p4"
              v-model="str"
              placeholder="请输入详细描述"
              maxlength="255"
            ></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="main2">
      <div class="main2_cent">
        <div class="name" @click="uploadPhoto">上传凭证</div>
        <div class="img">
          <van-uploader
            v-model="file_list"
            accept="image/*"
            max-count="1"
            preview-size="210px"
            :after-read="afterRead"
            deletable
            @delete="imgdelete"
          />
          <!-- <input type="file" @change="onLoadImg($event, index)" accept="image/*" class="van-uploader__input"> -->
        </div>
      </div>
    </div>
    <div class="mitbtn">
      <div class="btn" @click="submit">提交申请</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      orderid: 0,
      num: "",
      str: "",
      orderinfo: {},
      file_list: [],
      img: "",
      state: 0,
      token: "",
    };
  },
  created() {
    // wx.config({
    //   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    //   appId: "", // 必填，公众号的唯一标识
    //   timestamp: "", // 必填，生成签名的时间戳
    //   nonceStr: "", // 必填，生成签名的随机串
    //   signature: "", // 必填，签名
    //   jsApiList: [], // 必填，需要使用的JS接口列表
    // });
  },
  mounted() {
    this.token = window.localStorage.getItem("token");
    this.orderid = this.$route.query.orderid;
    this.state = this.$route.query.state;
    axios
      .post("/index/order/info", this.$qs.stringify({
        token: this.token,
        id: this.orderid,
      }))
      .then((res) => {
        this.orderinfo = res.data.data;
      });
  },
  methods: {
    onLoadImg(e,index){
      console.log('event', e)
      console.log('index', index)
    },
    goback() {
      this.$router.back();
    },
    uploadPhoto() {
      var _this = this;
      wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: function (res) {
          console.log(res, "999999999999999999999");
        },
        fail: function (res) {
          console.log("chooseImage", res);
        },
      });
    },
    afterRead(file) {
      var img_list = file;
      axios
        .post("/index/Upload/base64", this.$qs.stringify({
          images: img_list,
        }))
        .then((res) => {
          console.log(res.data.data, 111);
          this.img = res.data.data;
        });
    },
    imgdelete(file) {
      console.log(this.img);
      console.log(file, 22222);
      this.img = "";
    },
    submit() {
      console.log(this.token, this.orderid, this.num, this.str, this.img, 1111);
      axios
        .post("/index/Orderafter/add", this.$qs.stringify({
          token: this.token,
          id: this.orderid,
          num: this.num,
          detail: this.str,
          images: this.img,
        }))
        .then((res) => {
          console.log(res.data, 111);
          if (res.data.code === 1) {
            this.$toast(res.data.msg);
            this.$router.back();
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
  beforeDestroy() {
    document.querySelector("body").setAttribute("style", "");
  },
};
</script>

<style lang="scss" scoped>
.slot {
  width: 100%;
  height: 44px;
  .top {
    width: 100%;
    height: 44px;
    display: flex;display: -webkit-flex;
    justify-content: center;
    align-items: center;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    .return {
      width: 38px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;display: -webkit-flex;
      justify-content: center;
      align-items: center;
      img {
        width: 8px;
        height: 15px;
      }
    }
    span {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 44px;
    }
  }
}
.main {
  width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0px 0px 10px 10px;
  .li_cent {
    width: 100%;
    height: 96px;
    background: white;
    border-bottom: 1px solid #f8f8f8;
    display: flex;display: -webkit-flex;
    align-items: center;
    border-top: 8px solid #f8f8f8;
    .img {
      width: 75px;
      height: 75px;
      overflow: hidden;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .shop_info {
      width: 250px;
      margin-left: 30px;
      .shop_name {
        width: 100%;
        display: flex;display: -webkit-flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #222527;
          line-height: 14px;
        }
        .jiage {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #9a9a9a;
          line-height: 13px;
        }
      }
      .shop_price {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #9a9a9a;
        line-height: 11px;
        margin-top: 10px;
      }
      .cd_info {
        width: 100%;
        display: flex;display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 17px;
        .shop_spec {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #9a9a9a;
          line-height: 12px;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 30px;
    padding-bottom: 10px;
    display: flex;display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
    .bot_main {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 11px;
      color: #888888;
      line-height: 11px;
      margin-right: 15px;
    }
  }
}
.main1 {
  width: 100%;
  height: 252px;
  background: #ffffff;
  margin-top: 8px;
  .main1_cent {
    width: 345px;
    margin: auto;
    .cent_li {
      width: 100%;
      display: flex;display: -webkit-flex;
      align-items: center;
      border-bottom: 1px solid #f8f8f8;
      position: relative;
      .name {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 45px;
        margin-right: 20px;
      }
      .input {
        border: none;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 45px;
      }
      .danwei {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 45px;
        position: absolute;
        right: 0;
      }
      .type {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #4b78fa;
        line-height: 45px;
      }
      .p4 {
        width: 100%;
        height: 100px;
        border: none;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
      }
    }
  }
}
.main2 {
  width: 100%;
  background: white;
  margin-top: 8px;
  margin-bottom: 70px;
  .main2_cent {
    width: 345px;
    margin: auto;
    .name {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 45px;
    }
  }
}
.mitbtn {
  width: 100%;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;display: -webkit-flex;
  justify-content: center;
  align-items: center;
  .btn {
    width: 200px;
    height: 44px;
    background: #fdd40a;
    border-radius: 22px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #222222;
    line-height: 44px;
    text-align: center;
  }
}
</style>